import React from "react";
import {
  Card,
  Table,
  Space,
  Button,
  Select,
  Input,
  Typography,
  Row,
  Col,
  Tag,
  Form,
  Layout,
} from "antd";
import {
  SearchOutlined,
  ReloadOutlined,
  ExportOutlined,
} from "@ant-design/icons";
import styles from "./index.module.less";

const { Title } = Typography;
const { Search } = Input;
const { Content } = Layout;

interface TaskData {
  key: string;
  id: string;
  name: string;
  assignee: string;
  priority: string;
  column: string;
  progress: number;
  hours: number;
  createdAt: string;
  startTime: string;
  endTime: string;
}

const FilterList: React.FC = () => {
  const [form] = Form.useForm();

  const columns = [
    {
      title: "编号",
      dataIndex: "id",
      key: "id",
      render: (text: string) => text || "--",
    },
    {
      title: "任务卡名称",
      dataIndex: "name",
      key: "name",
      render: (text: string) => text || "--",
    },
    {
      title: "经办人",
      dataIndex: "assignee",
      key: "assignee",
      render: (text: string) => text || "--",
    },
    {
      title: "优先级",
      dataIndex: "priority",
      key: "priority",
      render: (text: string) => {
        if (!text) return "--";
        const colorMap: Record<string, string> = {
          高: "red",
          中: "orange",
          低: "green",
        };
        return (
          <Tag color={colorMap[text] || "default"} data-oid="2jc3u5m">
            {text}
          </Tag>
        );
      },
    },
    {
      title: "所在列",
      dataIndex: "column",
      key: "column",
      render: (text: string) => text || "--",
    },
    {
      title: "进度",
      dataIndex: "progress",
      key: "progress",
      render: (text: number) => (text ? `${text}%` : "--"),
    },
    {
      title: "报工工时",
      dataIndex: "hours",
      key: "hours",
      render: (text: number) => text || "--",
    },
    {
      title: "创建时间",
      dataIndex: "createdAt",
      key: "createdAt",
      render: (text: string) => text || "--",
    },
    {
      title: "计划开始时间",
      dataIndex: "startTime",
      key: "startTime",
      render: (text: string) => text || "--",
    },
    {
      title: "计划完成时间",
      dataIndex: "endTime",
      key: "endTime",
      render: (text: string) => text || "--",
    },
  ];

  const data: TaskData[] = [
    {
      key: "1",
      id: "TASK-001",
      name: "需求新方法论 (功能立项与看板及流程中心打通)",
      assignee: "王宇壮",
      priority: "中",
      column: "进行中",
      progress: 60,
      hours: 8,
      createdAt: "2024-03-15 10:00:00",
      startTime: "2024-03-15",
      endTime: "2024-03-20",
    },
    {
      key: "2",
      id: "TASK-002",
      name: "特性 功能立项与看板及流程中心打通",
      assignee: "陈建平",
      priority: "高",
      column: "待处理",
      progress: 0,
      hours: 0,
      createdAt: "2024-03-16 14:30:00",
      startTime: "2024-03-16",
      endTime: "2024-03-25",
    },
  ];

  const handleReset = () => {
    form.resetFields();
  };

  const handleExport = () => {
    // TODO: 实现导出功能
    console.log("导出数据");
  };

  return (
    <Layout className={styles.container} data-oid="qk_1zxg">
      <Content data-oid="pcrwj5g">
        <Card data-oid="n8jpqv6">
          <div className={styles.header} data-oid="qp.b3lo">
            <Title level={4} data-oid="qfrylka">
              任务卡管理
            </Title>
            <Space data-oid="_cpw7of">
              <Button
                icon={<ExportOutlined data-oid="g2c1jc_" />}
                onClick={handleExport}
                data-oid="a1kw8x_"
              >
                导出
              </Button>
            </Space>
          </div>

          <Form
            form={form}
            layout="vertical"
            className={styles.searchForm}
            data-oid="wh:c_21"
          >
            <Row gutter={[16, 16]} data-oid="2bp7up9">
              <Col span={6} data-oid="3t606.a">
                <Form.Item name="panel" label="所属面板" data-oid="2lszm1g">
                  <Select placeholder="请选择" data-oid="1_th:lg">
                    <Select.Option value="dev" data-oid="vmtavg7">
                      开发面板
                    </Select.Option>
                    <Select.Option value="test" data-oid="p_0nh0a">
                      测试面板
                    </Select.Option>
                  </Select>
                </Form.Item>
              </Col>
              <Col span={6} data-oid="hy-un8k">
                <Form.Item name="project" label="所属项目" data-oid="6j-toym">
                  <Select placeholder="请选择" data-oid="vyd1z_h">
                    <Select.Option value="project1" data-oid="r-k52tk">
                      需求新方法论
                    </Select.Option>
                    <Select.Option value="project2" data-oid="g1n5qv7">
                      特性功能
                    </Select.Option>
                  </Select>
                </Form.Item>
              </Col>
              <Col span={6} data-oid=".3-:ajv">
                <Form.Item name="assignee" label="经办人" data-oid="zea1jip">
                  <Select placeholder="请选择" data-oid="8-cxhm.">
                    <Select.Option value="王宇壮" data-oid="z7yi6yj">
                      王宇壮
                    </Select.Option>
                    <Select.Option value="陈建平" data-oid="kxu6_0_">
                      陈建平
                    </Select.Option>
                  </Select>
                </Form.Item>
              </Col>
              <Col span={6} data-oid="2:2hqu9">
                <Form.Item name="priority" label="优先级" data-oid="hc_muel">
                  <Select placeholder="请选择" data-oid="s8sjfx6">
                    <Select.Option value="高" data-oid="lc7acbt">
                      高
                    </Select.Option>
                    <Select.Option value="中" data-oid="225z9jy">
                      中
                    </Select.Option>
                    <Select.Option value="低" data-oid="x7:88.m">
                      低
                    </Select.Option>
                  </Select>
                </Form.Item>
              </Col>
              <Col span={6} data-oid="8vbg332">
                <Form.Item name="keyword" label="关键字" data-oid="1ocn3r_">
                  <Search placeholder="请输入任务卡名称" data-oid="-dzmyy7" />
                </Form.Item>
              </Col>
              <Col span={24} style={{ textAlign: "right" }} data-oid="w3y34nc">
                <Space data-oid="w1bpfr6">
                  <Button
                    icon={<ReloadOutlined data-oid="19p1zqd" />}
                    onClick={handleReset}
                    data-oid="25qso22"
                  >
                    重置
                  </Button>
                  <Button
                    type="primary"
                    icon={<SearchOutlined data-oid="a5x0yq0" />}
                    data-oid="998nypw"
                  >
                    搜索
                  </Button>
                </Space>
              </Col>
            </Row>
          </Form>

          <Table
            columns={columns}
            dataSource={data}
            pagination={{
              total: 50,
              pageSize: 10,
              showSizeChanger: true,
              showQuickJumper: true,
              showTotal: (total) => `共 ${total} 条`,
            }}
            data-oid="wdf9ucy"
          />
        </Card>
      </Content>
    </Layout>
  );
};

export default FilterList;
